<template>
    <div class="header">
        <div class="header-content">
            <div class="header-left">
                <!-- <span class="user-undo" @click="handleUndo" style="cursor:pointer;color:#fff;margin-right:16px;">
                    撤销组织账号
                </span> -->
                <span class="user-home" @click="goHome" style="cursor:pointer;color:#fff;">
                    回到主页
                </span>
            </div>
            <div class="header-title">学生组织管理系统SOMS</div>
            <div class="header-user">
                <span class="user-logout" @click="handleLogout" style="cursor:pointer;color:#fff;margin-right:16px;">
                    退出登录
                </span>
                <span class="user-name">欢迎你！用户{{ userName }}</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const userName = localStorage.getItem('loginId')
const orgId = localStorage.getItem('loginId')

// const handleUndo = () => {
//     ElMessageBox.confirm(
//         '确定要撤销该组织账号吗？',
//         '撤销确认',
//         {
//             confirmButtonText: '确定',
//             cancelButtonText: '取消',
//             type: 'warning',
//         }
//     ).then(async () => {
//         try {
//             await axios.delete(`http://localhost:8080/orgs/${orgId}`)
//             ElMessage.success('撤销成功！')
//             localStorage.removeItem('loginId')
//             router.push('/soLogin')
//         } catch (error) {
//             ElMessage.error('撤销失败')
//         }
//     }).catch(() => {
//         ElMessage.info('已取消撤销')
//     })
// }

const handleLogout = () => {
    localStorage.removeItem('loginId')
    router.push('/soLogin')
}

const goHome = () => {
    router.push('/soMain')
}
</script>
<style scoped>
.header {
    width: 100%;
    height: 60px;
    background-color: #05b6f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-title {
    font-size: 24px;
    text-align: center;
    flex: 2;
}

.header-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}
</style>